<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../../js/hpFrame.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <div class="pageContainer">
            <div class="formContainer">
                <el-form :model="form" :rules="rules" ref="form">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="登录名" :label-width="formLabelWidth" prop="userId" required>
                                <el-input v-model="form.userId" autocomplete="off" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="用户姓名" :label-width="formLabelWidth" prop="userName" required>
                                <el-input v-model="form.userName" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用户类别" :label-width="formLabelWidth" prop="userType" required>
                                <el-select v-model="form.userType" placeholder="请选择" style="width:100%" disabled>
                                    <el-option label="学生" value="1"> </el-option>
                                    <el-option label="老师" value="2"> </el-option>
                                    <el-option label="管理员" value="99"> </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="性别" :label-width="formLabelWidth">
                                <el-radio v-model="form.sex" label="1">男</el-radio>
                                <el-radio v-model="form.sex" label="2">女</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="邮箱" :label-width="formLabelWidth">
                                <el-input v-model="form.email" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="手机" :label-width="formLabelWidth">
                                <el-input v-model="form.phone" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="divEditButtons">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="close">关 闭</el-button>
        </div>
    </div>

</body>
<script>
    var detailUrl = apiFrameUrl + "user/getUserInfo";
    var updateUrl = apiFrameUrl + "user/updateById";
    var pageData = {
        //表单数据
        form: {
            userId: "",
            userName: '',
            userType: '',
            password: '1',
            sex: '1',
            email: '',
            phone: '',
        },
        //样式
        formLabelWidth: '120px',
        //验证规则
        rules: {
            userId: [{
                required: true,
                message: '请输入登陆名',
                trigger: 'blur'
            }],
            userName: [{
                required: true,
                message: '请输入用户姓名',
                trigger: 'blur'
            }],
            userType: [{
                required: true,
                message: '请选择用户类别',
                trigger: 'blur'
            }],
        },
    }
    var app = new Vue({
        el: '#app',
        data: pageData,
        methods: {
            //确定
            save() {
                var page = this;
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        JsonAjax(JSON.stringify(pageData.form), updateUrl, function (data,
                            status) {
                            if (data.success) {
                                OpenSuccess('提示', '保存成功', function () {
                                    CloseDialog(null, 'userdetail');
                                })
                            } else {
                                OpenFail('提示', '保存失败')
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            //取消
            close() {
                CloseDialog(null, 'userdetail');
            },
            loadDetail() {
                var param = {
                    userId: getUrlParam('userId')
                };
                JsonAjax(JSON.stringify(param), detailUrl, function(data, status) {
                    if(data.success){
                        Vue.set(pageData, "form", data.result);
                    }
                    
                })
            }
        },
        mounted() {
            checkUserInfo();
            this.loadDetail();
        },
    })
</script>

</html>